<template>
    <section class="Pubinfo">
        <ul class="payForm">
            <li>
                <p>活动名称：</p>
                <var>{{getActivity.title}}</var>
            </li>
            <li>
                <p>金额：</p>
                <var>&yen;{{getActivity.buyingPrice}}</var>
            </li>
        </ul>
        <dl class="payType">
            <dt>
                <img src="../images/success-pic.png">
            </dt>
            <dd>
                <p>微信支付</p>
                <span></span>
            </dd>
        </dl>
        <div class="busSubmit">
            <button @click="wechatToPay">
                前往支付
            </button>
        </div>
    </section>
</template>

<script>
    import { mapState, mapGetters } from 'vuex'
    import Request from "@/api/baseRequest.js";
    import { mixin_Pay } from "@/mixins/pay.js";
    export default {
        name: "Pubinfo",
        props: {},
        mixins: [mixin_Pay],
        data() {
            return {
                message: null,
                orderNo: '',
                orderTimeer: null,
                thereClick: true
            };
        },
        computed: {
            ...mapState([    // 使用辅助函数 mapState 
                'payStatus',   // 映射 this.payStatus为 this.$store.state.payStatus
                'status',
                'activity'
            ]),
            ...mapGetters([ // 使用辅助函数 mapGetters
                'getActivity', // 映射 this.perStatus为 this.$store.getters.perStatus
            ])
        },
        mounted() {
            this.applicationSubmit();
            console.log(this.getActivity, this.activity)
            this.$nextTick(() => {
                this.message = encodeURI(this.GetParam(window.location.href, "msg"))
            });
        },
        methods: {
            async applicationSubmit() {
                let params = {
                    id: this.GetParam(window.location.href, "id") || null,
                    userId: this.GetParam(window.location.href, "userId") || null,
                    shareId: this.GetParam(window.location.href, "shareId") || 0,
                };
                const { code, orderNo } = await Request.createOrder(params)
                if ([200, "200", "OK", 0].includes(code)) {
                    this.orderNo = orderNo;
                }
            },
            jumpHome() {
                let params = {
                    orderNo: this.orderNo
                }
                this.orderTimeer = setInterval(async () => {
                    const { code } = await Request.getOrderStatus(params);
                    if ([200, "200", "OK", 0].includes(code)) {
                        this.back();
                    }
                }, 1000);
            },
            wechatToPay() {
                if(!this.thereClick) {
                    this.$Alert({ title: "支付", message: '正在支付，请勿重复点击！' });
                    return false;
                }
                this.thereClick = !this.thereClick;
                if(this.orderNo) {
                    clearInterval(this.orderTimeer);
                    this.orderTimeer = null;
                    this.jumpHome();
                    this.handelPay(this.orderNo)
                } else {
                    this.thereClick = !this.thereClick;
                    this.$Alert({ title: "支付", message: '订单创建失败，请返回重新支付！' });
                }
            }
        },
        destroyed() {
            clearInterval(this.orderTimeer);
        }
    };
</script>

<style lang="less" scoped>
    @import url("@/styles/payinfo.less");
</style>
